<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.js'></script>
<div id="root">
	<div>
		<todo-form username='Ken'></todo-form>
		<todo-list ></todo-list>
	</div>
</div>
<script>
	//1.首先在todo-form有一个输入框
	//2.在todo-form还有一个add按钮
	//3.当在输入框输入内容
	//4.点击add按钮时生成li列表
	//5.列表里面包含label>input[checkbox]>span
var todoForm = Vue.extend({
	//来个props属性验证
	props : {
		username : {
			type : String,
			default : 'Ken',
		}
	},
	//创建一个模板
	template : `
		<div>
			<h1>{{username}}'s todo list !</h1>
			<p>
				<form action="" v-on:submit='add' v-on:submit.prevent>
					<input type="text" v-model='input'/>
					<input type="submit" value='add'/>
				</form>
			</p>
		</div>
	`,
	//数据初始化
	data : function(){
		return {
			input : "",
		}
	},
	//当add触发时向vm = new Vue实例发送信息
	methods : {
		add : function(){
			this.$dispatch('add',this.input);//告诉vm = new Vue实例add已经被触发了
			//接下来需要另一个组件触发添加列表事件
			this.input = '';
		}
	}
});
var todoList = Vue.extend({
	template : `
		<div>
			<ul>
				<li v-for = 'item in list'>
					<label v-bind:class={checked:item.checked}>
						<input type="checkbox" checked="{{item.checked}}"/>
						<span>{{item.content}}</span>
					</label>
				</li>
			</ul>
		</div>
	`,
	props : {//规定list是一个数组
		initList : {
			type : Array,
		}
	},
	data : function(){
		return {
			list : [],
		}
	},
	//数据处理
	events : {
		add : function(input){
			if(!input)return;//判断input输入框是否有内容，如果没有就不执行return之后代码
			this.list.unshift({
				content : input,
				checked : false
			})
		}
	}
});
//vm
var vm = new Vue({
	el : '#root',
	components : {//#root子元素里面有两个子元素todo-form和todo-list
		'todoForm' : todoForm,
		'todoList' : todoList,
	},
	//vm接受到todoForm傳來的信息之後觸發todoList的add事件
	events : {
		add : function(input){
			this.$broadcast('add',input)
		}
	}
})
</script>	
</body>
</html>